<template>
    <div class="id">
      <!--顶部导航栏-->
      <div class="nav-container home-nav" >
        <div class="new-header-container pos">
          <div class="header opac2">
            <div class="header-main">
              <!--logo-->
              <a style="height: 60px;width: 300px" href="" title="神州租车" class="header-logo default"></a>
              <!--导航栏-->
              <ul class="header-menus">
                <li class="menu-item current">
                  <a href="">
                    <router-link :to="{name:'Index'}">首页</router-link>
                  </a>
                </li>
                <li class="menu-item">
                  <a href="">
                    <router-link :to="{name:'Long'}">长租</router-link>
                  </a>
                </li>
                <li class="menu-item">
                  <a href="">
                    <router-link :to="{name:'Rent'}">租车</router-link>
                  </a>
                </li>
                <li class="menu-item">
                  <a href="">
                    <router-link :to="{name:'Point'}">网点查询</router-link>
                  </a>
                </li>
                <li class="menu-item">
                  <a href="">
                    <router-link :to="{name:'Activity'}">新闻活动</router-link>
                  </a>
                </li>
              </ul>
              <!--登录-->
              <div class="header-login">
                <form action="" target="_parent" method="post">
                  <input type="hidden" name="act" value="loginSys">
                  <input type="hidden" name="historyLocation" value="">
                </form>
                <router-link :to="{name:'Login'}">
                <div class="wdl">
                  <a class="colfabe00" >
                    登录/注册
                  </a>
                </div>
                </router-link>
              </div>
              <!--电话-->
              <div class="header-contact">
                <div class="tel-dropdown">159-7394-6666</div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Header"
    }
</script>

<style scoped>
  /*背景色*/
  .new-header-container.pos .opac2 {
    background: #162d46;
  }
  /*和主界面间距*/
  .new-header-container .header {
    height: 60px;
  }

  /*导航栏格局*/
  .new-header-container .header-main {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    height: inherit;
  }

  /*logo*/
  .new-header-container .header-logo.default {
    height: 80px;
    width: 325px;
    /*background: url() no-repeat;*/
    background-size: contain;
    /*background: url("../assets/kecz.png");*/
    background-image: url("../assets/kecz.png");
  }

  .new-header-container .header-logo {
    display: block;
    width: 211px;
    position: absolute;
    top: 0;
    left: 0;
    height: 58px;
    background: url() no-repeat;
    z-index: 10;
  }

  a{
    text-decoration: none;
  }
  .new-header-container .header-menus {
    overflow: hidden;
    margin-left: 204px;
  }

  ul {
    list-style: none;
  }

  .new-header-container .header-menus .menu-item.current a, .new-header-container .header-menus .menu-item a:hover {
    color: #fabe00;
    text-decoration: none;
  }
  .new-header-container .header-menus .menu-item a {
    display: block;
    padding: 0 20px;
    font-size: 16px;
    color: #fff;
    line-height: 60px;
    height: 60px;
    font-weight: 600;
  }

  .new-header-container .header-menus .menu-item {
    float: left;
  }

  .new-header-container .header-login {
    position: absolute;
    top: 0;
    width: auto;
    right: 138px;
    text-align: center;
  }

  [role=button], a, area, button, input:not([type=range]), label, select, summary, textarea {
    touch-action: manipulation;
  }
  button, input {
    overflow: visible;
  }
  button, input, optgroup, select, textarea {
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
  }
  input, select, textarea {
    font-size: 100%;
  }

  .new-header-container .header-login .wdl {
    height: 60px;
    display: flex;
    align-items: center;
    line-height: 60px;
  }

  .new-header-container .header-login .wdl a:first-child {
    margin-right: 15px;
  }
  .new-header-container .header-login .wdl a {
    text-decoration: none;
    display: inline-block;
    padding: 0 10px;
    height: 24px;
    border-radius: 4px;
    background: #ffc75d;
    font-size: 12px;
    color: #1c2a3a;
    line-height: 24px;
    margin: 0;
  }

  .new-header-container .header-contact {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    height: 60px;
    display: flex;
    align-items: center;
  }

  .new-header-container .header-contact .tel-dropdown {
    padding: 0 10px 0 28px;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    color: #121c27;
    border-radius: 4px;
    background-color: hsla(0,0%,100%,.8);
    background-image: url();
    background-repeat: no-repeat;
    background-position: 10px;
    background-size: 16px 16px;
  }
</style>
